<template>
  <div>
    <el-container>
      <el-header>
        <div class="wrapper">
          <div class="demo-basic--circle">
            <div class="block"><el-avatar  :src="circleUrl"></el-avatar></div>
          </div>
          <div class="sub-title">{{name}}</div>
          <div class="showData wrapper" v-if="isMember">
            <div><div class="content">{{coin}}</div><div class="content">金币</div></div>
            <div><div class="content">{{rank}}</div><div class="content">等级</div></div>
            <div><div class="content">{{point}}</div><div class="content">积分</div></div>
          </div>
          <div class="edit" v-if="notMember">
            <el-button round @click="toSet"><i class="el-icon-s-tools"></i><span>设置</span></el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="content-wrapper">
            <div class="grid-content" >
              <div :class="{fixednav: whether}" id="leftMenu">
                <el-menu
                  :default-active="num"
                  class="el-menu-vertical-demo"
                  background-color="#fff"
                  text-color="#000"
                  active-text-color="#fff"
                  defaultActive="1">
                  <router-link :to="{name :item.url}" exact v-for="item in current1"  :key="item.id">
                    <el-menu-item :index="item.id">
                      <i :class="item.icon"></i>
                      <span slot="title">{{item.name}}</span>
                      </el-menu-item>
                  </router-link>
                </el-menu>
              </div>
            </div>
          <div class="showContent">
            <router-view/>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'personalCenter',
  data () {
    return {
      whether: false,
      current1: '',
      menuLeft: '',
      menuTop: '',
      // circleUrl: 'https://i.loli.net/2019/12/06/4LhTjfKoZPBtEv8.png',
      // name: '',
      // point: '',
      // rank: '',
      // coin: '',
      isMember: false,
      notMember: true,
      num: 1,
      memberTab: [
        {
          id: '1',
          name: '课程',
          url: 'pcClass',
          icon: 'el-icon-notebook-2'
        },
        {
          id: '2',
          name: '证书',
          url: 'pcCertificate',
          icon: 'el-icon-medal'
        },
        {
          id: '3',
          name: '问答',
          url: 'pcQuestion',
          icon: 'el-icon-question'
        }
      ],
      employeeTab: [
        {
          id: '1',
          name: '新闻',
          url: 'pcNews',
          icon: 'el-icon-s-grid'
        }
      ],
      administratorTab: [
        {
          id: '1',
          name: '职员',
          url: 'pcEmployee',
          icon: 'el-icon-s-custom'
        },
        {
          id: '2',
          name: '会员',
          url: 'pcMember',
          icon: 'el-icon-user'
        },
        {
          id: '3',
          name: '老师',
          url: 'pcTeacher',
          icon: 'el-icon-user-solid'
        }
      ],
      teacherTab: [
        {
          id: '1',
          name: '课程',
          url: 'myClass',
          icon: 'el-icon-reading'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      current: 'current',
      circleUrl: 'circleUrl',
      name: 'name',
      coin: 'coin',
      rank: 'rank',
      point: 'point'
    })
  },
  methods: {
    isLogin () {
      this.http.get(this.ports.manage.current,
        res => {
          if (res.status === 200) {
            let data = res.data.result.msg
            if (data[1] === '1') {
              this.current1 = this.memberTab
              this.isMember = true
            } else if (data[1] === '2') {
              this.current1 = this.employeeTab
            } else if (data[1] === '3') {
              this.current1 = this.administratorTab
              this.notMember = false
            } else if (data[1] === '4') {
              this.current1 = this.teacherTab
            }
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    },
    getElemPos (obj) {
      let pos = {'top': 0, 'left': 0}
      if (obj.offsetParent) {
        while (obj.offsetParent) {
          pos.top += obj.offsetTop
          pos.left += obj.offsetLeft
          obj = obj.offsetParent
        }
      } else if (obj.x) {
        pos.left += obj.x
      } else if (obj.x) {
        pos.top += obj.y
      }
      return {x: pos.left, y: pos.top}
    },
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > this.menuTop) {
        this.whether = true
      } else {
        this.whether = false
      }
    },
    toSet () {
      this.$router.push({path: '/setprofile', query: {type: this.current}})
    }
  },
  mounted: function () {
    this.isLogin()
    this.menuTop = this.getElemPos(document.querySelector('#leftMenu')).y
    window.addEventListener('scroll', this.handleScroll)
    console.log(this.current)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  watch: {
    $route (to) {
      let str = to.path.slice(16)
      if (str === 'pcClass') {
        this.num = 1
      } else if (str === 'pcCertificate') {
        this.num = 2
      } else if (str === 'pcQuestion') {
        this.num = 3
        console.log('55555')
      }
    },
    current: function (val) {
      if (val === 0) {
        this.$router.push('/')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
 .el-main .grid-content {
    min-height: 0.2rem;
    padding-top: 0.5rem;
    width: 470px;
  }
  .el-header {
    color: #333;
    text-align: center;
  }
  .el-main {
    color: #333;
    text-align: center;
  }
  .el-menu {
    width: 3rem;
    border: none;
    background-color: transparent;
  }
  .el-menu-item {
    width: 3rem;
    height: 1rem;
    line-height: 1rem;
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
  }
  .el-menu-item:hover{
    background-color: #ffffff !important;
    color: #93999f !important;
  }
  .el-menu-item.is-active {
    background-color: rgba(240,20,20,.8) !important;
    color: #ffffff !important;
  }
  .el-menu-item.is-active:after {
    content: "";
    width: 0;
    height: 0;
    left: 100%;
    top: 0;
    position: absolute;
    border-top: 0.5rem solid transparent;
    border-left: 0.35rem solid rgba(240,20,20,.8);
    border-bottom: 0.5rem solid transparent;
  }
  .el-header {
    padding: 0.6rem 0 2.1rem 0;
    background: url("https://i.loli.net/2019/11/28/FdgRAEJtGe4Zpci.png") no-repeat center top #000;
    background-size:100% 100%;
  }
  .el-main{
    padding: 0;
  }
  .wrapper{
    display: flex;
    justify-content: space-between;
  }
  .sub-title{
    color: #fff;
    width: 9rem;
    font-size: 0.4rem;
    line-height: 2.5rem;
    height:2.5rem;
    text-align: left;
    padding-left: 0.5rem;
    flex: 1 0;
  }
  .el-avatar {
    box-shadow:2px 2px 10px #4d555d;
    width:2.1rem;
    height:2.1rem;
    margin-left: 3.5rem;
    border: solid 3px #fff;
    margin-top: 0.3rem;
  }
  .content {
    padding-top: 0.5rem;
    color: #ccc;
    font-size: 0.3rem;
    width: 1.5rem;
    height: 0.1rem;
    text-align: center;
  }
  .showData {
    margin-top: 0.2rem;
  }
  .edit {
    margin-right: 3.5rem;
    padding-top: 0.8rem;
  }
  .edit > .el-button{
    background-color: transparent;
    color: #ccc;
    border: solid 1px #ccc;
  }
  .showContent{
    width: 700px;
    padding-top: 50px;
    margin-left: 30px;
  }
  .content-wrapper{
    display: flex;
    justify-content: flex-start;
    padding-top: 30px;
  }
  #leftMenu {
    width: 200px;
    padding-left: 200px;
    padding-top: 20px;
  }
  @media screen and (min-width: 1100px) {
    .fixednav {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
    }

  }
  @media screen and (max-width: 1100px) {
    .fixednav {
    }
    .grid-content {
      flex-shrink: 1;
    }
  }
</style>
